<div id="WidthBackground2">
            <div id="Title_StartToBuy"></div>
            <div id="SplitLongLine"></div>
            <div id="ShirtImage">
            <div style="height:473px;text-align:center;width:330px;position:relative;" >
                <img src="<?php echo $this->getSkinUrl('images/shirt-image.jpg')?>" id="shirtImageBg">
                <div style="height: 100px; position: absolute; width: 330px; bottom: 0px;">
                       <div class="ShirtImageDiv"><img src="<?php echo $this->getSkinUrl('images/rd/486_341_2-79543.jpg')?>" style="cursor:pointer;" onmouseover="changeBgImage('http://rd.com/skin/frontend/default/youthor/images/shirt-image.jpg');"></div>
                       <div class="ShirtImageDiv" style="margin-left:17px;"><img src="<?php echo $this->getSkinUrl('images/rd/486_341_2-79543.jpg')?>" style="cursor:pointer;" onmouseover="changeBgImage('http://rd.com/skin/frontend/default/youthor/images/shirt-image.jpg');"></div>
                       <div class="ShirtImageDiv" style="margin-left:15px;"><img src="<?php echo $this->getSkinUrl('images/rd/486_341_2-79543.jpg')?>" style="cursor:pointer;" onmouseover="changeBgImage('http://rd.com/skin/frontend/default/youthor/images/shirt-image1.jpg');"></div>
                     
                </div>
            </div>
            </div>
            <div id="StartToBuyContent1">Lorem ipsum dolor sit amet, 
                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
                Aenean massa. Cum sociis natoque penatibus et magnis dis 
                parturient montes, nascetur ridiculus mus. Donec quam felis, 
                ultricies nec, pellentesque.
            </div>
             <form action="<?php echo Mage::getUrl('checkout/cart/add/uenc/');?>" method="post" id="product_addtocart_form">
             <input type="hidden" name="qty" id="qty" maxlength="12" value="1"  />
             
            <div class="TagLine" ><div class="TagLineTitle" id="Fabric">SELECT FABRIC</div></div>
            <div class="TagContent" id="FabricContent">
                    <div style="padding-top: 10px; padding-left: 12px;">
                        <table class="Content" style="width: 98%;">
                            <tbody><tr>
                                <td colspan="5">SWATCHES</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="height: 6px; border-top: 1px solid rgb(255, 255, 255);">&nbsp;</td>
                            </tr>
                            
                             <?php $_productCollection=$this->getProductsCollection();
                              $rows = ceil(count($_productCollection)/5);
                             for($i=0 ;$i < $rows;$i++) {
                             ?>
                            <tr>
                                <?php 
                                $n = 0;
                                for($j = $i*5 ; $j < ($i+1)*5; $j++) {
                                    if ($j == count($_productCollection)) break;
                                    $n++;
                                    $_product = $_productCollection[$j]
                                ?>
                                <td align="center" style="text-align:center;">
                               
                                 
                                <img height="81" width="81" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(81, 81); ?>" alt="">
                                <br/>
                                  <span style="text-align:center;"> <input type="radio" name="product" value="<?php echo $_product->getId();?>"><?php echo number_format($_product->getFinalPrice(), 2);?></span>
                                </td>
                               
                                <?}?>
                                 <?php for(; $n < 5; $n++) {?>
                                <td align="center">
                                
                                </td>
                                <?}?>
                            </tr>
                              <?php 
                              
                              }?> 
                           
                           
                            <tr>
                                <td align="center" colspan="5">
                                &nbsp;</td>
                            </tr>
                        </tbody></table>
                        
                    </div>
                </div>
            <div class="TagLine"><div class="TagLineTitle" id="Collar">SELECT COLLAR</div></div>
            <div class="TagContent" id="CollarContent" style="display:none">
                    <div style="padding-top: 10px; padding-left: 12px;">
                        <table class="Content" style="width: 98%;">
                            <tbody><tr>
                                <td colspan="5">SWATCHES</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="height: 6px; border-top: 1px solid rgb(255, 255, 255);">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt="">
                                <br/>
                                </td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center" colspan="5">
                                &nbsp;</td>
                            </tr>
                        </tbody></table>
                        
                    </div>
                </div>
            <div class="TagLine"><div class="TagLineTitle" id="Cuffs">SELECT CUFFS</div></div>
            <div class="TagContent" id="CuffsContent" style="display:none">
                    <div style="padding-top: 10px; padding-left: 12px;">
                        <table class="Content" style="width: 98%;">
                            <tbody><tr>
                                <td colspan="5">SWATCHES</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="height: 6px; border-top: 1px solid rgb(255, 255, 255);">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center" colspan="5">
                                &nbsp;</td>
                            </tr>
                        </tbody></table>
                        
                    </div>
                </div>
            <div class="TagLine"><div class="TagLineTitle" id="Options">ADDITIONAL CUSTOMIZE OPTIONS</div></div>
            <div class="TagContent" id="OptionsContent" style="display:none">
                    <div style="padding-top: 10px; padding-left: 12px;">
                        <table class="Content" style="width: 98%;">
                            <tbody><tr>
                                <td colspan="5">SWATCHES</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="height: 6px; border-top: 1px solid rgb(255, 255, 255);">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center" colspan="5">
                                &nbsp;</td>
                            </tr>
                        </tbody></table>
                        
                    </div>
                </div>
            <div class="TagLine"><div class="TagLineTitle" id="MOptions">MONOGRAMMING OPTIONS</div></div>
            <div class="TagContent" id="MOptionsContent" style="display:none">
                    <div style="padding-top: 10px; padding-left: 12px;">
                        <table class="Content" style="width: 98%;">
                            <tbody><tr>
                                <td colspan="5">SWATCHES</td>
                            </tr>
                            <tr>
                                <td colspan="5" style="height: 6px; border-top: 1px solid rgb(255, 255, 255);">&nbsp;</td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                                <td align="center">
                                <img height="81" width="81" src="<?php echo $this->getSkinUrl('images/small-shirt.jpg');?>" alt=""></td>
                            </tr>
                            <tr>
                                <td align="center" colspan="5">
                                &nbsp;</td>
                            </tr>
                        </tbody></table>
                        
                    </div>
                </div>
                <div align="right" id="ConfirmNext"><input type="image" src="<?php echo $this->getSkinUrl('images/confirm-next.jpg');?>"></div>
              </form>
            
            <div id="StartToBuyContent2">Lorem ipsum dolor sit amet, 
                consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
                Aenean massa. Cum sociis natoque penatibus et magnis dis 
                parturient montes, nascetur ridiculus mus. Donec quam felis, 
                ultricies nec, pellentesque eu, pretium quis, sem. Nulla 
                consequat massa quis enim. Donec pede justo, fringilla vel, 
                aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, 
                imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede 
                mollis pretium. Integer tincidunt. Cras dapibus. Vivamus 
                elementum semper nisi. Aenean vulputate eleifend tellus. Aenean 
                leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. 
                Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 
                Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. 
                Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur 
                ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
                Maecenas tempus, tellus eget condimentum rhoncus, sem quam 
                semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam 
                nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. 
                Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien 
                ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet 
                orci eget eros faucibus tincidunt. Duis leo. Sed fringilla 
                mauris sit amet nibh. Donec sodales sagittis magna. Sed 
                consequat, leo eget bibendum sodales, augue velit cursus nunc.</div>
        </div>
<script language="javascript">
var elements = $$('.TagLineTitle');
    elements.each(function(el){
        el.observe('click', changeSection);
    });
function changeSection(event) {
       element = Event.element(event);
       var es =  $$('.TagContent');
       es.each(function(el){
         if (element.id + 'Content' != el.id) {
             Effect.BlindUp(el, { duration: 0.5 });
         }
         else {
           Effect.SlideDown(el, { duration: 0.5 });
         }
    });
}
function changeBgImage(url) {
    $('shirtImageBg').src= url;
}
           


</script>
